<template>
  <div class="like-btn pointer" @click="toggleLike">
    <Icon v-if="!like" size="16" name="heart"></Icon>
    <Icon v-else size="16" name="heartActive"></Icon>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAccountStore } from '@/store/account'
import API from '@/http'

const props = defineProps({
  id: { type: Number, required: true },
  isLike: { type: Boolean, required: true },
})

const like = ref(props.isLike)

const accountStore = useAccountStore()
const { afterLoginAction } = accountStore

const toggleLike = afterLoginAction($toggleLike)
function $toggleLike() {
  like.value = !like.value
  const toggler = like.value ? API.Comment.like : API.Comment.unlike
  if ($toggleLike.controller) {
    $toggleLike.controller.abort()
  }
  $toggleLike.controller = new AbortController()
  toggler({
    data: { comment_id: props.id },
    config: { signal: $toggleLike.controller.signal },
  }).catch((e) => console.warn('Toggle comment like fail: ', e))
}
</script>
